<script setup>
import { slideIn } from "@utils/directives/index.js";
defineOptions({
  directives: {
    slideIn
  }
});

</script>

<template>
  <div class="block">
    <div v-slide-in class="p-5 items-content" v-for="n in 12" :key="n">
      <div class="w-full h-100 ">{{ n }}</div>
    </div>
  </div>
</template>

<style>
@import "tailwindcss";
.items-content {
  @apply mt-2.5;
}
.items-content:nth-child(1n) {
  @apply bg-blue-500;
}
.items-content:nth-child(2n) {
  @apply bg-red-500;
}
.items-content:nth-child(3n) {
  @apply bg-green-500;
}
.items-content:nth-child(4n) {
  @apply bg-yellow-500;
}
.items-content:nth-child(5n) {
  @apply bg-purple-500;
}
.items-content:nth-child(6n) {
  @apply bg-pink-500;
}

</style>